<template>
  <div class="float__warp">
    <div class="title__warp">
      <span class="title">{{ title }}</span>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.float__warp {
  background-color: white;
  padding: 35px 30px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(146, 146, 146, 0.1);
  width: 360px;
  overflow: hidden;
  .title__warp {
    font-size: 0;
    height: 50px;
    .title {
      font-size: 18px;
      font-weight: bold;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        display: block;
        height: 3px;
        width: 50%;
        background-color: #404040;
        margin-top: 10px;
        transition: width 0.5s;
      }
    }
  }
  .content {
    width: 300px;
    overflow: hidden;
  }
  &:hover {
    .title {
      &::after {
        width: 100%;
      }
    }
  }
}
</style>